<template>
  <!-- 专题内容页面 -->
  <div
    class="topics"
    :style="{ background: data.bg_color, color: data.font_color }"
  >
    <headerTop></headerTop>
    <img
      v-if="data.json_content"
      :src="data.json_content.special.cover"
      alt=""
    />
    <div class="topicBox" v-if="data.json_content">
      <div class="topicTitle">{{ data.title }}</div>
      <div
        class="topicContent"
        v-for="item in data.json_content.oneDataArticles"
        :key="item.id"
        @click="
          goviewArticles(
            item.content_id,
            item.category,
            [{ title: '阅读' }],
            '阅读'
          )
        "
      >
        <div class="topicTop">
          <img :src="item.img_url" alt="" />
          <div class="iconImg">
            <img src="@/assets/声音无.png" alt="" />
          </div>
          <div>{{ item.title }}</div>
        </div>
        <div class="topicBottom">
          <div>{{ item.forward }}</div>
          <div>
            <span>{{ item.author.user_name }}</span>
            <div class="vicons">
              <van-icon name="like-o" /><span>{{ item.like_count }}</span
              ><van-icon name="share-o" />
            </div>
          </div>
        </div>
      </div>
      <!-- 文章底部作者及编辑人的信息与评论  拆分成组件，方便复用-->
      <editor :comments="comments"></editor>
    </div>
  </div>
</template>

<script>
import { getArticleContent, getComment } from "@/api/articlesPage";
import headerTop from "@/components/headerTop";
import editor from "@/components/editor";
export default {
  name: "topic",
  components: {
    headerTop,
    editor,
  },
  data() {
    return {
      data: {},
      comments: {},
    };
  },
  created() {
    console.log("topic路由传参", this.$route.params.id);
    this.getTopicDetail();
  },
  methods: {
    async getTopicDetail() {
      const { data } = await getArticleContent(this.$route.params.id, "topic");
      this.data = data;
      console.log("专题内容数据", data);
      if (this.data.json_content) {
        this.getComments();
      }
    },

    async getComments() {
      // 获取阅读的评论
      const { data } = await getComment(
        this.data.json_content.type,
        this.data.id,
        this.commentId
      );
      this.comments = data;
      console.log(this.comments);
    },
    goviewArticles(id, category, title, titleTR) {
      // // 跳转到文章详情页
      // if(category==='1'){
      console.log("跳转的id", id);
      this.$router.push({
        path: "/articlesPage",
        query: {
          id: id,
          category: category,
          title: JSON.stringify(title),
          titleTR: encodeURIComponent(titleTR),
        },
      });
      // }else if(category==='3'){
      //   this.$router.push({
      //     path:'/answer',
      //     query:{
      //      id:id,
      //      category:category,
      //      title: JSON.stringify(title),
      //      titleTR:encodeURIComponent(titleTR)
      //    }
      //   })
      // }
      console.log("触发了");
    },
  },
};
</script>

<style lang="less" scoped>
.topics {
  width: 375px;
  padding-bottom: 60px;
  box-sizing: border-box;
  img {
    width: 100%;
  }

  .topicBox {
    width: 375px;
    padding: 0 15px 0 15px;
    img {
      display: block;
    }
    .topicTitle {
      font-size: 25px;
      margin-bottom: 20px;
    }
    .topicContent {
      margin-bottom: 20px;
      .topicTop {
        position: relative;
        .iconImg {
          position: absolute;
          top: 5%;
          right: 5%;
          width: 20px;
          height: 20px;
          background: gray;
          border-radius: 50%;
          line-height: 20px;
          img {
            width: 18px;
            height: 18px;
            margin-left: 3px;
          }
        }
        & > :nth-child(3) {
          position: absolute;
          left: 5%;
          bottom: 5%;
          font-size: 20px;
          color: #ffffff;
        }
      }
      .topicBottom {
        padding: 20px;
        background: #ffffff;
        & > :nth-child(1) {
          font-size: 14px;
          padding-bottom: 20px;
        }
        & > :nth-child(2) {
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #acacac;
          .vicons {
            span {
              font-size: 10px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
</style>